به‌روزرسانی‌های دسته‌ای در React: بهینه‌سازی تغییرات State برای عملکرد بهتر

عملکرد React برای ساخت رابط‌های کاربری روان و پاسخ‌گو بسیار حیاتی است. یکی از مکانیزم‌های کلیدی که React برای بهینه‌سازی عملکرد به کار می‌گیرد، به‌روزرسانی‌های دسته‌ای (batched updates) است. این تکنیک چندین به‌روزرسانی state را در یک چرخه رندر مجدد گروه‌بندی می‌کند که به طور قابل توجهی تعداد رندرهای مجدد غیرضروری را کاهش داده و پاسخ‌گویی کلی برنامه را بهبود می‌بخشد. این مقاله به پیچیدگی‌های به‌روزرسانی‌های دسته‌ای در React می‌پردازد و توضیح می‌دهد که چگونه کار می‌کنند، چه مزایا و محدودیت‌هایی دارند و چگونه می‌توان از آن‌ها برای ساخت برنامه‌های React با کارایی بالا به طور مؤثر استفاده کرد.

درک فرآیند رندرینگ در React

قبل از پرداختن به به‌روزرسانی‌های دسته‌ای، درک فرآیند رندرینگ React ضروری است. هر زمان که state یک کامپوننت تغییر می‌کند، React نیاز دارد تا آن کامپوننت و فرزندانش را مجدداً رندر کند تا state جدید را در رابط کاربری منعکس کند. این فرآیند شامل مراحل زیر است:

1. به‌روزرسانی State: state یک کامپوننت با استفاده از متد setState (یا یک هوک مانند useState) به‌روز می‌شود.
2. تطبیق (Reconciliation): ری‌اکت DOM مجازی جدید را با نسخه قبلی مقایسه می‌کند تا تفاوت‌ها ("diff") را شناسایی کند.
3. اعمال (Commit): ری‌اکت DOM واقعی را بر اساس تفاوت‌های شناسایی‌شده به‌روز می‌کند. اینجاست که تغییرات برای کاربر قابل مشاهده می‌شوند.

رندر مجدد می‌تواند یک عملیات محاسباتی سنگین باشد، به خصوص برای کامپوننت‌های پیچیده با درخت‌های کامپوننت عمیق. رندرهای مجدد مکرر می‌تواند منجر به گلوگاه‌های عملکردی و تجربه کاربری کند شود.

به‌روزرسانی‌های دسته‌ای چه هستند؟

به‌روزرسانی‌های دسته‌ای یک تکنیک بهینه‌سازی عملکرد است که در آن React چندین به‌روزرسانی state را در یک چرخه رندر مجدد گروه‌بندی می‌کند. به جای رندر مجدد کامپوننت پس از هر تغییر state مجزا، React منتظر می‌ماند تا تمام به‌روزرسانی‌های state در یک محدوده مشخص کامل شوند و سپس یک رندر مجدد واحد را انجام می‌دهد. این کار به طور قابل توجهی تعداد دفعات به‌روزرسانی DOM را کاهش می‌دهد و منجر به بهبود عملکرد می‌شود.

به‌روزرسانی‌های دسته‌ای چگونه کار می‌کنند

ری‌اکت به طور خودکار به‌روزرسانی‌های state را که در محیط کنترل‌شده‌اش رخ می‌دهند، دسته‌بندی می‌کند، مانند:

• مدیریت‌کننده‌های رویداد (Event handlers): به‌روزرسانی‌های state در مدیریت‌کننده‌های رویدادی مانند onClick، onChange و onSubmit دسته‌بندی می‌شوند.
• متدهای چرخه حیات React (کامپوننت‌های کلاسی): به‌روزرسانی‌های state در متدهای چرخه حیات مانند componentDidMount و componentDidUpdate نیز دسته‌بندی می‌شوند.
• هوک‌های React: به‌روزرسانی‌های state که از طریق useState یا هوک‌های سفارشی که توسط مدیریت‌کننده‌های رویداد فعال می‌شوند، انجام می‌گیرند، دسته‌بندی می‌شوند.

هنگامی که چندین به‌روزرسانی state در این زمینه‌ها رخ می‌دهد، React آن‌ها را در یک صف قرار می‌دهد و سپس پس از اتمام مدیریت‌کننده رویداد یا متد چرخه حیات، یک فاز تطبیق و اعمال واحد را انجام می‌دهد.

مثال:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default Counter;

در این مثال، با کلیک بر روی دکمه "Increment"، تابع handleClick فراخوانی می‌شود که setCount را سه بار فراخوانی می‌کند. React این سه به‌روزرسانی state را در یک به‌روزرسانی واحد دسته‌بندی می‌کند. در نتیجه، کامپوننت فقط یک بار رندر مجدد می‌شود و count به جای اینکه برای هر فراخوانی setCount یک واحد افزایش یابد، ۳ واحد افزایش می‌یابد. اگر React به‌روزرسانی‌ها را دسته‌بندی نمی‌کرد، کامپوننت سه بار رندر مجدد می‌شد که کارایی کمتری دارد.

مزایای به‌روزرسانی‌های دسته‌ای

مزیت اصلی به‌روزرسانی‌های دسته‌ای، بهبود عملکرد با کاهش تعداد رندرهای مجدد است. این امر منجر به موارد زیر می‌شود:

• به‌روزرسانی‌های سریع‌تر UI: کاهش رندرهای مجدد منجر به به‌روزرسانی‌های سریع‌تر رابط کاربری می‌شود و برنامه را پاسخ‌گوتر می‌کند.
• کاهش دستکاری‌های DOM: به‌روزرسانی‌های کمتر DOM به معنای کار کمتر برای مرورگر است که منجر به عملکرد بهتر و مصرف منابع کمتر می‌شود.
• بهبود عملکرد کلی برنامه: به‌روزرسانی‌های دسته‌ای به یک تجربه کاربری روان‌تر و کارآمدتر کمک می‌کنند، به ویژه در برنامه‌های پیچیده با تغییرات state مکرر.

چه زمانی به‌روزرسانی‌های دسته‌ای اعمال نمی‌شوند

در حالی که React در بسیاری از سناریوها به‌روزرسانی‌ها را به طور خودکار دسته‌بندی می‌کند، شرایطی وجود دارد که این دسته‌بندی رخ نمی‌دهد:

• عملیات ناهمزمان (خارج از کنترل React): به‌روزرسانی‌های state که در داخل عملیات ناهمزمان مانند setTimeout، setInterval یا promiseها انجام می‌شوند، معمولاً به طور خودکار دسته‌بندی نمی‌شوند. این به این دلیل است که React کنترلی بر زمینه اجرای این عملیات‌ها ندارد.
• مدیریت‌کننده‌های رویداد بومی (Native Event Handlers): اگر از شنونده‌های رویداد بومی استفاده می‌کنید (مثلاً، با اتصال مستقیم شنونده‌ها به عناصر DOM با استفاده از addEventListener)، به‌روزرسانی‌های state در آن مدیریت‌کننده‌ها دسته‌بندی نمی‌شوند.

مثال (عملیات ناهمزمان):

import React, { useState } from 'react';

function DelayedCounter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1);
      setCount(count + 1);
      setCount(count + 1);
    }, 0);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default DelayedCounter;

در این مثال، با اینکه setCount سه بار پشت سر هم فراخوانی می‌شود، آن‌ها در داخل یک callback مربوط به setTimeout قرار دارند. در نتیجه، React این به‌روزرسانی‌ها را *نخواهد کرد* و کامپوننت سه بار رندر مجدد خواهد شد و در هر رندر مجدد، شمارنده یک واحد افزایش می‌یابد. درک این رفتار برای بهینه‌سازی صحیح کامپوننت‌های شما حیاتی است.

اجبار به دسته‌بندی به‌روزرسانی‌ها با unstable_batchedUpdates

در سناریوهایی که React به‌روزرسانی‌ها را به طور خودکار دسته‌بندی نمی‌کند، می‌توانید از unstable_batchedUpdates از کتابخانه react-dom برای اجبار به دسته‌بندی استفاده کنید. این تابع به شما اجازه می‌دهد تا چندین به‌روزرسانی state را در یک دسته واحد قرار دهید و اطمینان حاصل کنید که آن‌ها با هم در یک چرخه رندر مجدد پردازش می‌شوند.

نکته: API مربوط به unstable_batchedUpdates ناپایدار در نظر گرفته می‌شود و ممکن است در نسخه‌های آینده React تغییر کند. با احتیاط از آن استفاده کنید و آماده باشید که در صورت لزوم کد خود را تنظیم کنید. با این حال، این ابزار همچنان برای کنترل صریح رفتار دسته‌بندی مفید است.

مثال (استفاده از unstable_batchedUpdates):

import React, { useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom';

function DelayedCounter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      unstable_batchedUpdates(() => {
        setCount(count + 1);
        setCount(count + 1);
        setCount(count + 1);
      });
    }, 0);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default DelayedCounter;

در این مثال اصلاح‌شده، از unstable_batchedUpdates برای قرار دادن سه فراخوانی setCount در داخل callback مربوط به setTimeout استفاده شده است. این کار React را مجبور به دسته‌بندی این به‌روزرسانی‌ها می‌کند که نتیجه آن یک رندر مجدد واحد و افزایش شمارنده به میزان ۳ واحد است.

React 18 و دسته‌بندی خودکار

React 18 دسته‌بندی خودکار را برای سناریوهای بیشتری معرفی کرد. این بدان معناست که React به طور خودکار به‌روزرسانی‌های state را دسته‌بندی می‌کند، حتی زمانی که آن‌ها در داخل timeoutها، promiseها، مدیریت‌کننده‌های رویداد بومی یا هر رویداد دیگری رخ دهند. این امر به طور قابل توجهی بهینه‌سازی عملکرد را ساده‌تر کرده و نیاز به استفاده دستی از unstable_batchedUpdates را کاهش می‌دهد.

مثال (دسته‌بندی خودکار در React 18):

import React, { useState } from 'react';

function DelayedCounter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1);
      setCount(count + 1);
      setCount(count + 1);
    }, 0);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default DelayedCounter;

در React 18، مثال بالا به طور خودکار فراخوانی‌های setCount را دسته‌بندی می‌کند، حتی با وجود اینکه آن‌ها در داخل یک setTimeout قرار دارند. این یک بهبود قابل توجه در قابلیت‌های بهینه‌سازی عملکرد React است.

بهترین شیوه‌ها برای بهره‌برداری از به‌روزرسانی‌های دسته‌ای

برای بهره‌برداری مؤثر از به‌روزرسانی‌های دسته‌ای و بهینه‌سازی برنامه‌های React خود، بهترین شیوه‌های زیر را در نظر بگیرید:

• گروه‌بندی به‌روزرسانی‌های مرتبط State: هر زمان که ممکن است، به‌روزرسانی‌های مرتبط state را در یک مدیریت‌کننده رویداد یا متد چرخه حیات گروه‌بندی کنید تا از مزایای دسته‌بندی حداکثر استفاده را ببرید.
• اجتناب از به‌روزرسانی‌های غیرضروری State: با طراحی دقیق state کامپوننت و اجتناب از به‌روزرسانی‌های غیرضروری که بر رابط کاربری تأثیر نمی‌گذارند، تعداد به‌روزرسانی‌های state را به حداقل برسانید. استفاده از تکنیک‌هایی مانند memoization (مانند React.memo) را برای جلوگیری از رندر مجدد کامپوننت‌هایی که props آن‌ها تغییر نکرده است، در نظر بگیرید.
• استفاده از به‌روزرسانی‌های تابعی (Functional Updates): هنگام به‌روزرسانی state بر اساس state قبلی، از به‌روزرسانی‌های تابعی استفاده کنید. این کار تضمین می‌کند که شما با مقدار صحیح state کار می‌کنید، حتی زمانی که به‌روزرسانی‌ها دسته‌بندی شده‌اند. به‌روزرسانی‌های تابعی یک تابع را به setState (یا setter مربوط به useState) ارسال می‌کنند که state قبلی را به عنوان آرگومان دریافت می‌کند.
• مراقب عملیات ناهمزمان باشید: در نسخه‌های قدیمی‌تر React (قبل از نسخه ۱۸)، آگاه باشید که به‌روزرسانی‌های state در عملیات ناهمزمان به طور خودکار دسته‌بندی نمی‌شوند. در صورت لزوم از unstable_batchedUpdates برای اجبار به دسته‌بندی استفاده کنید. با این حال، برای پروژه‌های جدید، به شدت توصیه می‌شود که به React 18 ارتقا دهید تا از دسته‌بندی خودکار بهره‌مند شوید.
• بهینه‌سازی مدیریت‌کننده‌های رویداد: کد داخل مدیریت‌کننده‌های رویداد خود را بهینه‌سازی کنید تا از محاسبات غیرضروری یا دستکاری‌های DOM که می‌توانند فرآیند رندرینگ را کند کنند، جلوگیری کنید.
• پروفایل‌گیری از برنامه: از ابزارهای پروفایل‌گیری React برای شناسایی گلوگاه‌های عملکردی و بخش‌هایی که می‌توان به‌روزرسانی‌های دسته‌ای را بیشتر بهینه کرد، استفاده کنید. تب Performance در React DevTools می‌تواند به شما در تجسم رندرهای مجدد و شناسایی فرصت‌های بهبود کمک کند.

مثال (به‌روزرسانی‌های تابعی):

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default Counter;

در این مثال، از به‌روزرسانی‌های تابعی برای افزایش count بر اساس مقدار قبلی استفاده شده است. این کار تضمین می‌کند که count به درستی افزایش می‌یابد، حتی زمانی که به‌روزرسانی‌ها دسته‌بندی شده‌اند.

نتیجه‌گیری

به‌روزرسانی‌های دسته‌ای در React یک مکانیزم قدرتمند برای بهینه‌سازی عملکرد با کاهش رندرهای مجدد غیرضروری است. درک نحوه کارکرد به‌روزرسانی‌های دسته‌ای، محدودیت‌های آن‌ها و چگونگی بهره‌برداری مؤثر از آن‌ها برای ساخت برنامه‌های React با کارایی بالا بسیار حیاتی است. با پیروی از بهترین شیوه‌های ذکر شده در این مقاله، می‌توانید به طور قابل توجهی پاسخ‌گویی و تجربه کاربری کلی برنامه‌های React خود را بهبود بخشید. با معرفی دسته‌بندی خودکار در React 18، بهینه‌سازی تغییرات state حتی ساده‌تر و مؤثرتر می‌شود و به توسعه‌دهندگان اجازه می‌دهد تا بر ساخت رابط‌های کاربری شگفت‌انگیز تمرکز کنند.